/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../EventPosting.less';
import { Collapse, Icon, Select, Input, Tooltip, Form, Row, Col, TreeSelect, Tag, message } from 'antd';
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
import moment from 'moment';
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const { SHOW_CHILD } = TreeSelect;

class Alter_Edit extends Component {

    constructor(props) {
        super(props)

    }

    componentDidMount() {
        //风险及防护措施
        this.props.EditData.riskProtectionList.forEach((item, index) => {
            this.state.arr[4].list.push(
                {
                    type: 'TextArea',
                    paramName: (new Date()).valueOf() + index + 'fengxian',
                    id: (new Date()).valueOf() + 'fengxian',
                    title: '0/100',
                    num: 100,
                    key: (new Date()).valueOf() + 'fengxian',
                    label: `#${index + 1}风险信息`,
                    rules: [{ ...config.reg.required }],
                    span: 24,
                    rows: 2,
                    colSpan: 24,
                    style: { width: 530 },
                    initialValue: item.riskName,
                    disabled: true
                },
                {
                    type: 'TextArea',
                    paramName: (new Date()).valueOf() + index + 'cuoshi',
                    id: (new Date()).valueOf() + 'cuoshi',
                    title: '0/100',
                    num: 100,
                    key: (new Date()).valueOf() + 'cuoshi',
                    label: `#${index + 1}对应措施`,
                    rules: [{ ...config.reg.required }],
                    span: 24,
                    rows: 2,
                    colSpan: 24,
                    style: { width: 530 },
                    initialValue: item.measures,
                    disabled: true
                }
            )
        })


        this.setState({
            arr: this.state.arr
        })

    }

    state = {
        Task: [],
        treeArr: [],//一般下拉
        treeArr: [],
        selectedRowKeys: [],
        arr: [
            {
                type: 'title',
                name: "基本信息",
                span: 24,
                backgroundColor: '#206bdc',
                color: '#206bdc',
                marginTop: 10,
                height: 30
            },
            {
                type: 'TextArea',
                paramName: 'eventBasicName',
                id: 'eventBasicName',
                title: '0/30',
                num: 30,
                key: "eventBasicName",
                label: '事件名称',
                style: { width: 550 },
                rules: [{ ...config.reg.required }],
                span: 24,
                rows: 1,
                colSpan: 24,

                initialValue: this.props.EditData.eventName,
                disabled: true

            },
            // {
            //     type: 'select',
            //     paramName: 'milepost',
            //     id: 'milepost',
            //     key: "milepost",
            //     label: '是否为里程碑',
            //     rules: [{ ...config.reg.required }],
            //     span: 10,
            //     placeholder: '请选择',
            //     options: [

            //         { text: '否', value: 0 },
            //         { text: '是', value: 1 },

            //     ],
            //     initialValue: this.props.EditData.milepost
            // },
            {
                type: 'TextArea',
                paramName: 'eventBasicDescribe',
                id: 'eventBasicDescribe',
                title: '0/200',
                num: 200,
                key: "eventBasicDescribe",
                label: '事件说明',
                style: { width: 550 },
                rules: [{ ...config.reg.required }],
                span: 24,
                rows: 2,
                colSpan: 24,
                initialValue: this.props.EditData.eventDescribe,
                disabled: true
            },

            // {
            //     type: 'title',
            //     name: "安全信息",
            //     span: 24,
            //     backgroundColor: '#1fd02e',
            //     color: '#1fd02e',
            //     marginTop: 10,
            //     height: 30
            // },
            // {
            //     type: 'TextArea',
            //     paramName: 'safetyInformation',
            //     id: 'safetyInformation',
            //     title: '0/200',
            //     num: 200,
            //     key: "safetyInformation",
            //     label: '安全信息/防护措施',
            //     // rules: [{ ...config.reg.required }],
            //     span: 24,
            //     rows: 2,
            //     style: { width: 490 },

            //     initialValue: this.props.EditData.safetyInformation,
            //     disabled: true
            // },
            // {
            //     type: 'treeSelect',
            //     paramName: 'safetyInformationList',
            //     id: 'safetyInformationList',
            //     title: '0/200',
            //     num: 200,
            //     key: "safetyInformationList",
            //     label: '安全提示人',
            //     // rules: [{ ...config.reg.required }],
            //     className: styles.safetyInformationList,
            //     treeCheckable: true,
            //     maxTagCount: 5,
            //     span: 24,
            //     rows: 2,
            //     style: { width: 538},
            //     treeData: this.props.EditData.userTree,
            //     initialValue: this.props.EditData.safetyInformationUser

            // },
            {
                type: 'title',
                name: "风险信息",
                span: 24,
                backgroundColor: '#dc8a20',
                color: '#dc8a20',
                marginTop: 10,
                height: 30
            },
            {
                type: 'arr',
                list: []
            },
            {
                type: 'title',
                name: "事件知识库",
                span: 24,
                backgroundColor: '#5f5b5b',
                color: '#5f5b5b',
                marginTop: 0,
                height: 30
            },
            {
                type: 'MyTable',
                data: this.props.EditData.knowledgeBaseList


            },

        ],
        roleIdArr: [],
        expandIconPosition: 'left',
        title: '添加子事件',
        subEvent: false,
        subEventArr: [],
        sonArrList: []

    };

    onDelete = () => {
        // console.log('删除')
    }
    //计算文本域内数字个数
    onChangeNum = (v) => {
        var strs = getByteLen(v);
        function getByteLen(val) {
            strs = val.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，|\。|\？|\：|\；|\‘|\’|\”|\“|\、|\·|\！|\（|\）|\》|\《|\『|\』]/g, "");
            return strs;
        }
        return strs.length

    }
    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
        this.props.ModalCancel()
    };



    // 筛选条件组件change事件
    getChangeValue = (value, e) => {
        let t = this;
        let params = {};
        params[value] = e.target.value;
        t.setState({ params });
        //form表单赋值-----改变文本域数字个数
        this.props.form.setFieldsValue({ [value]: e.target.value })
        this.addChange(value, e.target.value.length)


    }



    getChangeValueList = (value, e) => {
        let t = this;
        let params = {};
        params[value] = e.target.value;
        t.setState({ params });
        //form表单赋值-----改变文本域数字个数
        this.props.form.setFieldsValue({ [value]: e.target.value })
        this.addChangeList(value, e.target.value.length)


    }

    addChangeList = (v, num) => {
        this.state.arr[10].list.forEach(item => {
            if (item.paramName === v) {
                item.title = `${num}/${item.num}`
            }
        });
    }

    addChangeSon = (v, num, index) => {
        this.state.sonArr[index].sonArrList.forEach(item => {
            if (item.paramName === v) {
                item.title = `${num}/${item.num}`
            }
        });
    }
    //新增改变tooplie的显示文字
    addChange = (v, num) => {
        this.state.arr.forEach(item => {
            if (item.paramName === v) {
                item.title = `${num}/${item.num}`
            }
        });
    }

    //保存按钮事件
    onModalSave = () => {

        this.props.form.validateFields((errors, values) => {
            // console.log(errors, values)
            if (!errors) {
                this.props.onModalSave(values)
            }

        });

    }


    selectedChange(fun, nextParams, paramName, index, value) {
        // console.log(fun, nextParams, paramName, index, value)


        let t = this;
        let params = {};
        params[paramName] = value;
        if (paramName) {
            t.setState({ params }, () => {
            });
        }
        if (typeof fun === "function") {
            fun(value);
            if (nextParams)
                t.props.form.setFieldsValue({
                    [nextParams]: ''
                })
        }
    }


    //多选
    onSelectChange = (selectedRowKeys, row) => {
        // console.log(selectedRowKeys, row)
        this.setState({ selectedRowKeys, row })
    };



    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }
        const { expandIconPosition, selectedRowKeys } = this.state;
        let { getFieldDecorator } = this.props.form;
        const genExtra = () => (

            <span onClick={this.onDelete} style={{ color: 'red' }}>删除</span>
        );

        const columns = [
            { title: '知识库名称', dataIndex: 'repositoryName', key: 'platform', width: 100 },
            // { title: '文件大小', dataIndex: 'fileSize', key: 'upgradeNum', width: 100 },
            { title: '上传时间', dataIndex: 'createTime', key: 'creator', width: 120 , render: (text, record, index) => <span>{moment(text).format('YYYY-MM-DD')} </span>},
            { title: '上传人', dataIndex: 'theHeir', key: 'uploadUser', width: 120 },
            // { title: '操作', key: 'operation', width: 100, render: (text, record, index) => <span><a href="javascript:;">下载</a> </span> },
        ];

        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange.bind(this),
        };


        return (

            <MyModal
                mask={false}
                width={800}
                visible={true}
                title={'事件信息补充'}
                footerShow={false}
                destroyOnClose={true}
                {...this.props}
               
            >
            <div style={{display:'flex',flexDirection:'column'}}>
            <Form layout={'inline'} style={{ paddingLeft: 40, paddingRight: 40 }} className={styles.Edit}>
                    <Row gutter={48} key={55555}>
                        {
                            this.state.arr.map((item, index) => {
                                if (item.type === 'TextArea') {
                                    return (
                                        <Col span={item.span || 8} key={index} className={item.className}>
                                            <Form.Item label={item.label} key={item.paramName}>
                                                <Tooltip
                                                    trigger={['focus']}
                                                    title={item.title}
                                                    placement="topLeft"
                                                    overlayClassName="numeric-input"
                                                >
                                                    {
                                                        getFieldDecorator(item.paramName, {
                                                            initialValue: item.initialValue ? item.initialValue : '',
                                                            rules: item.rules || null
                                                        })(

                                                            <TextArea
                                                                style={item.style}
                                                                placeholder={item.placeholder}
                                                                // onChange={this.onChange}
                                                                className={item.shuoming}
                                                                rows={item.rows}
                                                                maxLength={item.num}
                                                                disabled={true} id={[item.paramName]}
                                                                onChange={this.getChangeValue.bind(this, item.paramName)} size={config.size}
                                                            />

                                                        )
                                                    }
                                                </Tooltip>
                                            </Form.Item>
                                        </Col>
                                    )
                                } else if (item.type === 'select') {
                                    return (
                                        <Col span={8} key={index}>
                                            <Form.Item label={item.label} key={item.paramName} className={item.className} >
                                                {
                                                    getFieldDecorator(item.paramName, {
                                                        initialValue: item.initialValue ? item.initialValue : (item.options[0] ? Util.numToString(item.options[0].value) : item.options[0]),
                                                        rules: item.rules || null
                                                    })(
                                                        <Select
                                                            size={config.size}
                                                            showSearch
                                                            style={item.style}
                                                            mode={item.mode}
                                                            placeholder="Select a person"
                                                            className={item.shuoming}
                                                            optionFilterProp="children"
                                                            dropdownMatchSelectWidth={t.props.dropdownMatchSelectWidth}
                                                            onChange={t.selectedChange.bind(t, item.selectChange, item.nextParamName || false, item.paramName)}
                                                            onSelect={item.onSelect}
                                                            disabled={true}
                                                        >
                                                            {
                                                                item.options.map(option => {
                                                                    return (
                                                                        <Select.Option key={option.value}
                                                                            value={Util.numToString(option.value)}
                                                                        >
                                                                            {option.text}
                                                                        </Select.Option>

                                                                    )
                                                                })
                                                            }
                                                        </Select>
                                                    )
                                                }
                                            </Form.Item>
                                        </Col>
                                    )
                                } else if (item.type === 'treeSelect') {
                                    return (
                                        <Col span={item.span || 8} key={index}>
                                            <Form.Item label={item.label} key={item.paramName}  >
                                                {
                                                    getFieldDecorator(item.paramName, {
                                                        initialValue: item.initialValue ? item.initialValue : null,
                                                        rules: item.rules || null
                                                    })(
                                                        <TreeSelect
                                                            treeData={item.treeData}
                                                            onChange={t.selectedChange.bind(t, item.selectChange, item.nextParamName || false, item.paramName)}
                                                            treeCheckable={item.treeCheckable}
                                                            showCheckedStrategy={SHOW_CHILD}
                                                            // searchPlaceholder={'请选部门'}
                                                            style={item.style}
                                                            maxTagCount={item.maxTagCount}
                                                            disabled={true}
                                                            className={item.className}
                                                        />
                                                    )
                                                }
                                            </Form.Item>
                                        </Col>
                                    )
                                } else if (item.type === 'title') {
                                    return (


                                        <Col span={item.span || 8} key={index} style={{ paddingLeft: 0, paddingRight: 0, height: item.height }}>
                                            {/* <div style={{ width: "100%", borderBottom: "5px solid #423578",marginBottom:10 }}></div> */}
                                            <h2 style={{ fontSize: 14, fontWeight: 700, position: 'relative', marginBottom: 0, marginTop: item.marginTop, marginBottom: 5 }}><span style={{ padding: 1, color: "#fff", backgroundColor: item.backgroundColor, position: 'absolute', left: '-15px', width: 5, height: 20 }}> </span><span style={{ color: item.color }}>{item.name}</span></h2>


                                        </Col>


                                    )
                                } else if (item.type === 'arr') {
                                    return (
                                        item.list.map((item, index) => {
                                            if (item.type === 'TextArea') {
                                                return (
                                                    <Col span={item.span || 8} key={index}>
                                                        <Form.Item label={item.label} key={item.paramName} className={item.className} >
                                                            <Tooltip
                                                                trigger={['focus']}
                                                                title={item.title}
                                                                placement="topLeft"
                                                                overlayClassName="numeric-input"
                                                            >
                                                                {
                                                                    getFieldDecorator(item.paramName, {
                                                                        initialValue: item.initialValue ? item.initialValue : '',
                                                                        rules: item.rules || null
                                                                    })(

                                                                        <TextArea
                                                                            style={item.style}
                                                                            placeholder={item.placeholder}
                                                                            className={item.shuoming}
                                                                            // onChange={this.onChange}
                                                                            rows={item.rows}
                                                                            maxLength={item.num}
                                                                            disabled={true} id={[item.paramName]}
                                                                            onChange={this.getChangeValueList.bind(this, item.paramName)} size={config.size} style={item.style}
                                                                        />

                                                                    )
                                                                }
                                                            </Tooltip>
                                                        </Form.Item>
                                                    </Col>
                                                )
                                            } else if (item.type === 'delete') {
                                                return (
                                                    <Col span={22} key={index} xxl={{ push: 2 }} style={{ textAlign: 'right', height: 20 }} push={2}>
                                                        <IconFont type="icon-dongjie" onClick={this.onDelete.bind(this, item.index)} style={{ fontSize: 16, cursor: 'pointer', width: 20, height: 20, color: 'red' }} />
                                                        <IconFont type="icon-quanxianpeizhi" onClick={this.onHuifu.bind(this, item.index)} style={{ fontSize: 16, cursor: 'pointer', width: 20, height: 20, color: 'green' }} />
                                                        {/* <button onClick={this.onDelete.bind(this, item.index)}>删除</button> */}
                                                    </Col>
                                                )
                                            }

                                        })


                                    )
                                } else if (item.type === 'button') {
                                    return (
                                        <Col span={2} key={index} xxl={{ pull: 0 }} style={{ textAlign: 'right', height: 20, width: 2 }} pull={1}>

                                            <IconFont type="icon-xinzeng" onClick={this.addListfx} style={{ fontSize: 16, cursor: 'pointer', width: 20, height: 20, color: '#16B8BD' }} />
                                        </Col>
                                    )
                                } 
                            })
                        }

                    </Row>
                </Form>
                <MyTable
                    columns={columns}
                    dataSource={this.props.EditData.knowledgeBaseList}
                    pagination={false}
                />
            </div>

                
            </MyModal>
        );


    }
}
export default Form.create()(Alter_Edit);

